@extends('admin.layout')

@section('title', '新建房间')
@section('page-title', '新建房间')

@section('content')
<div class="space-y-6">
    <!-- 返回按钮 -->
    <div class="flex items-center">
        <a href="{{ route('admin.rooms.index') }}" 
           class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            返回房间列表
        </a>
    </div>

    <!-- 添加房间表单 -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100">
        <div class="px-6 py-6 border-b border-gray-200">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-indigo-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                <h2 class="text-xl font-semibold text-gray-900">添加新房间</h2>
            </div>
            <p class="mt-2 text-sm text-gray-600">填写房间的基本信息</p>
        </div>

        <form method="POST" action="{{ route('admin.rooms.store') }}" class="px-6 py-6">
            @csrf
                
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <!-- 房间ID -->
                <div class="sm:col-span-2">
                    <label for="room_id" class="block text-sm font-medium text-gray-700">
                        房间ID <span class="text-red-500">*</span>
                    </label>
                    <div class="mt-1">
                        <input type="text" 
                               name="room_id" 
                               id="room_id"
                               value="{{ old('room_id') }}"
                               required
                               class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('room_id') border-red-300 @enderror"
                               placeholder="请输入房间唯一标识">
                    </div>
                    @error('room_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 房间标题 -->
                <div class="mb-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                        房间标题 <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="title" 
                           name="title" 
                           value="{{ old('title') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('title') border-red-500 @enderror"
                           placeholder="请输入房间标题"
                           required>
                    @error('title')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 房间描述 -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        房间描述
                    </label>
                    <textarea id="description" 
                              name="description" 
                              rows="4"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 @enderror"
                              placeholder="请输入房间描述">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 房间类型 -->
                <div class="mb-6">
                    <label for="type" class="block text-sm font-medium text-gray-700 mb-2">
                        房间类型 <span class="text-red-500">*</span>
                    </label>
                    <select id="type" 
                            name="type" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror"
                            required>
                        <option value="">请选择房间类型</option>
                        <option value="temporary" {{ old('type') == 'temporary' ? 'selected' : '' }}>临时房间</option>
                        <option value="permanent" {{ old('type') == 'permanent' ? 'selected' : '' }}>永久房间</option>
                    </select>
                    @error('type')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 创建者 -->
                <div class="mb-6">
                    <label for="creator_id" class="block text-sm font-medium text-gray-700 mb-2">
                        创建者 <span class="text-red-500">*</span>
                    </label>
                    <select id="creator_id" 
                            name="creator_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('creator_id') border-red-500 @enderror"
                            required>
                        <option value="">请选择创建者</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('creator_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->nickname }} ({{ $user->phone }})
                            </option>
                        @endforeach
                    </select>
                    @error('creator_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 菜单来源 -->
                <div class="mb-6">
                    <label for="menu_source" class="block text-sm font-medium text-gray-700 mb-2">
                        菜单来源 <span class="text-red-500">*</span>
                    </label>
                    <select id="menu_source" 
                            name="menu_source" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('menu_source') border-red-500 @enderror"
                            required>
                        <option value="">请选择菜单来源</option>
                        <option value="default" {{ old('menu_source') == 'default' ? 'selected' : '' }}>默认菜单</option>
                        <option value="custom" {{ old('menu_source') == 'custom' ? 'selected' : '' }}>自定义菜单</option>
                    </select>
                    @error('menu_source')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 自定义菜单选择 -->
                <div class="mb-6" id="custom_menu_field" style="display: none;">
                    <label for="menu_id" class="block text-sm font-medium text-gray-700 mb-2">
                        选择菜单
                    </label>
                    <select id="menu_id" 
                            name="menu_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('menu_id') border-red-500 @enderror">
                        <option value="">请选择菜单</option>
                        @foreach($menus as $menu)
                            <option value="{{ $menu->id }}" {{ old('menu_id') == $menu->id ? 'selected' : '' }}>
                                {{ $menu->name }} ({{ $menu->creator->nickname }})
                            </option>
                        @endforeach
                    </select>
                    @error('menu_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 最大参与人数 -->
                <div class="mb-6">
                    <label for="max_participants" class="block text-sm font-medium text-gray-700 mb-2">
                        最大参与人数
                    </label>
                    <input type="number" 
                           id="max_participants" 
                           name="max_participants" 
                           value="{{ old('max_participants') }}"
                           min="1" 
                           max="100"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('max_participants') border-red-500 @enderror"
                           placeholder="请输入最大参与人数">
                    @error('max_participants')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 过期时间 -->
                <div class="mb-6" id="expires_field" style="display: none;">
                    <label for="expires_at" class="block text-sm font-medium text-gray-700 mb-2">
                        过期时间
                    </label>
                    <input type="datetime-local" 
                           id="expires_at" 
                           name="expires_at" 
                           value="{{ old('expires_at') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('expires_at') border-red-500 @enderror">
                    @error('expires_at')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

            <div class="flex justify-end space-x-3 mt-6">
                <a href="{{ route('admin.rooms.index') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    取消
                </a>
                <button type="submit" 
                        class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    创建房间
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuSourceSelect = document.getElementById('menu_source');
    const customMenuField = document.getElementById('custom_menu_field');
    const typeSelect = document.getElementById('type');
    const expiresField = document.getElementById('expires_field');
    
    function toggleCustomMenuField() {
        if (menuSourceSelect.value === 'custom') {
            customMenuField.style.display = 'block';
        } else {
            customMenuField.style.display = 'none';
            document.getElementById('menu_id').value = '';
        }
    }
    
    function toggleExpiresField() {
        if (typeSelect.value === 'temporary') {
            expiresField.style.display = 'block';
        } else {
            expiresField.style.display = 'none';
            document.getElementById('expires_at').value = '';
        }
    }
    
    menuSourceSelect.addEventListener('change', toggleCustomMenuField);
    typeSelect.addEventListener('change', toggleExpiresField);
    
    toggleCustomMenuField(); // 初始化
    toggleExpiresField(); // 初始化
});
</script>
@endsection
